<template>
  <div>
    <!-- <p>count, {{this.$store.state.count}}</p>
    <p>getNum, {{this.$store.getters.getNum}}</p> -->
    <button @click="add">+1</button>
    <router-link to="/about">About</router-link>
    &nbsp;
    <router-link to="/polyv">Polyv</router-link>
    &nbsp;
    <router-link to="/tree">Tree</router-link>
    &nbsp;
    <router-link to="/edit">edit</router-link>
    &nbsp;
    <router-link to="/mall">mall</router-link>
    &nbsp;
    <router-link to="/map">map</router-link>
    <!-- <p @click="see">
      <a href="/tableSelect">tableSelect</a>
    </p> -->
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- <WatchTest></WatchTest> -->
    <!-- <Children>
      <template v-slot:name>{{name}}</template>
    </Children> -->
    <!-- <PageIndex></PageIndex> -->
    <!-- <SortTable></SortTable> -->
    <ExpandTable></ExpandTable>
    <span style="color: red;">{{ hour }}:{{ minute }}:{{ second }}</span>
  </div>
</template>

<script>
const semver = require('semver')
import HelloWorld from '@/components/HelloWorld.vue'
import ExpandTable from '@/components/ExpandTable.vue'
// import PageIndex from '@/components/pageIndex'
// import WatchTest from '@/components/WatchTest'
// import Children from './components/Children.vue'
// import SortTable from '@/components/SortTable.vue'

export default {
  name: 'Index',
  components: {
    // Children,
    HelloWorld,
    ExpandTable
    // PageIndex,
    // WatchTest,
    // SortTable
  },
  data () {
    return {
      people: {
        name: 'leilei',
        ...{
          age: 22
        }
      },
      hour: 0,
      minute: 0,
      second: 0,
    }
  },
  props: {
    remainTime: {    // 倒计时间总秒数
      default: '329475'
    }
  },
  mounted() {
    console.log('semver', semver.gt('1.0.3', '1.0.23'))
    if (this.remainTime > 0) {
      this.hour = Math.floor((this.remainTime / 3600) % 24)
      this.minute = Math.floor((this.remainTime / 60) % 60)
      this.second = Math.floor(this.remainTime % 60)
      this.countDown()
    }
    // let param = {
    //   d:4
    // }
    // 复制对象
    // let obj = {
    //   a:1,
    //   b:2,
    //   c:3,
    //   ...param
    // }
    // let copyObj = {...obj}
    // console.log(`The copyObj is ${JSON.stringify(copyObj)}`)
    // console.log(this.people)
    // console.log(this.$route.query.redirect)
    // if (this.people && this.people.name === '哈哈') {
    //   console.log(1111)
    // }
    // if (this.people?.name === '哈哈') {
    //   console.log(2222)
    // } else {
    //   console.log(3333)
    // }
    // const promise = new Promise((resolve) => {
    //   console.log(1)
    //   resolve()
    //   console.log(2)
    // })
    // promise.then(() => {
    //   console.log(3)
    // })
    // console.log(4)


    // promise 状态一旦改变则不能再变
    // const promise1 = new Promise((resolve) => {
    //   setTimeout(() => {
    //     resolve('success')
    //   }, 1000)
    // })
    // const promise2 = promise1.then(() => {
    //   throw new Error('error!!!')
    // })

    // console.log('promise1', promise1)
    // console.log('promise2', promise2)

    // setTimeout(() => {
    //   console.log('promise1', promise1)
    //   console.log('promise2', promise2)
    // }, 2000)

    // promise每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用
    // Promise.resolve(1)
    //   .then((res) => {
    //     console.log(res)
    //     return 1
    //   })
    //   .catch(() => {
    //     return 3
    //   })
    //   // 继续沿用res返回
    //   .then((res) => {
    //     console.log(res)
    //   })
    const promises = [
      Promise.resolve('a'),
      Promise.resolve('b'),
      Promise.resolve('c'),
    ];
    Promise.all(promises)
      .then(() => {
        // console.log(arr)
      })
    const a = [1,2,3];
    const b = [1,5,6];
    const c = a.concat(b);//[1,2,3,1,5,6]
    console.log('c', c)

    const obj1 = {
      a:1,
    }
    const obj2 = {
      b:1,
    }
    const obj = {...obj1, ...obj2}
    console.log('obj', obj)
    // const name = '小明';
    // const score = 59;
    // const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
    // console.log('result', result)
    const deps = {
      '采购部':[{
        ids: [1,2,3]
      }],
      '人事部':[{
        ids: [5,8,12]
      }],
      '行政部':[{
        ids: [5,14,79]
      }],
      '运输部':[{
        ids: [3,64,105]
      }],
    }
    let member = Object.values(deps).flat(Infinity);
    console.log('member', member)
    const user = {
      name: 'lili'
    }
    // let name = user && user.name;
    let name = user?.name;
    console.log('name', name)
    // let obj = {};
    // let index = 1;
    // obj[`topic${index}`] = '话题内容';
    // 方法1
    // const fn1 = () =>{
    //   return new Promise((resolve) => {
    //     setTimeout(() => {
    //       resolve(1);
    //     }, 300);
    //   });
    // }
    // 方法2
    // const fn2 = () =>{
    //   return new Promise((resolve) => {
    //     setTimeout(() => {
    //       resolve(2);
    //     }, 600);
    //   });
    // }
    // const fn = () =>{
    //   fn1().then(res1 =>{
    //       console.log(res1);// 1
    //       fn2().then(res2 =>{
    //         console.log(res2)
    //       })
    //   })
    // }
    // const fn = async () => {
    //   const res1 = await fn1();
    //   const res2 = await fn2();
    //   console.log(res1);// 1
    //   console.log(res2);// 2
    // }
    // 正式没有等待异步完成、
    // const fn = () => {
    //   // race: 有一个成功就返回结果不再继续执行
    //   // all: 所有请求的结果
    //   Promise.all([fn1(), fn2()]).then(res => {
    //     console.log(res)
    //   })
    // }
    // fn()
    // return后就不会继续往下执行
    this.fn2().then((res) => {
      console.log('res', res)
    })

    // 正则？匹配的是前面条件0或1个情况
    // const money = /^[0-9]+(.[0-9]{2})?$/
    // console.log(money.test("18"))
    // 对象属性分组
    // const peoples = [
    //   { name: 'Alice', age: 21 },
    //   { name: 'Max', age: 20 },
    //   { name: 'Jane', age: 20 }
    // ];
    // const ageGroupPeoples = this.groupBy(peoples, 'age')
    // console.log('ageGroupPeoples', ageGroupPeoples)
  },
  methods: {
    fn2() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(2);
        }, 600);
      });
    },
    countDown () {
      var self = this
      clearInterval(this.promiseTimer)
      this.promiseTimer = setInterval(function () {
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0
            self.$emit('countDownEnd', true)
            clearInterval(self.promiseTimer)
          } else {
            self.second -= 1
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1
            self.minute = 59
            self.second = 59
          } else {
            self.second -= 1
          }
        }
      }, 1000)
    },
    formatNum (num) {
      return num < 10 ? '0' + num : '' + num
    },
    add() {
      this.$store.commit('add', 1)
    }
  }
}
</script>

<style>

</style>